<script>
import BottomTab from "@/conponents/BottomTab.vue";
import {Toast} from "vant";

export default {
  name: "IndexHome",
  components: {BottomTab},
  data() {
    return {
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
      searchIconShow: true
    }
  },
  watch: {
    '$route': function (val, oldVal) {
      console.log(val, oldVal)
    }
  },
  methods: {
    onClickMessage() {
      if (!this.$store.state.userInfo) {
        Toast({
          message: '请先登录在查看哦',
          type: "fail",
          forbidClick: true
        })
        return
      }
      this.$router.push({name: 'noticeNotice'})
    }
  }
}
</script>

<template>
  <div style="padding-bottom: 60px">
    <div
        style="background-color: rgb(202,86,65);height: 300px;width: 100%;position: absolute;top: 0;left: 0;z-index: -1"/>
    <div class="header">
      <van-icon color="white" name="scan" size="25"/>
      <div class="search"
           @click="() => {$refs.searchInputRef.focus();$refs.searchInputRef.style.width = 'auto';searchIconShow = false}">
        <van-icon v-show="searchIconShow" name="search" size="18"/>
        <input @blur="searchIconShow = true;$refs.searchInputRef.style.width = '88px'" class="search-input"
               ref="searchInputRef" placeholder="请输入内容">
      </div>
      <van-icon @click="onClickMessage" color="white" name="chat-o" size="25"/>
    </div>
    <van-swipe loop style="margin: 20px 20px 0;" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in images" :key="item">
        <img style="border-radius: 15px;width: 100%;height: 100%" :src="item" :alt="item" class="my-swipe">
      </van-swipe-item>
    </van-swipe>
    <van-grid column-num="4" :border="false">
      <van-grid-item icon="photo-o" text="文字"/>
      <van-grid-item icon="photo-o" text="文字"/>
      <van-grid-item icon="photo-o" text="文字"/>
      <van-grid-item icon="photo-o" text="文字"/>
    </van-grid>
    <van-divider style="margin: 0"/>
    <div class="tips" @click="$router.push({name: 'brandList'})">
      <div style="display: flex;align-items: center">
        <img src="@/assets/icon_home_brand.png" alt="品牌图标" width="60" style="margin-right: 10px"/>
        <div style="display: inline-block">
          <span style="margin: 0;display: flex">品牌制造商直供</span>
          <span>工厂直达消费者，剔除品牌溢价</span>
        </div>
      </div>
      <van-icon name="arrow" size="24"/>
    </div>
    <van-grid column-num="2">
      <van-grid-item>
        <div style="text-align: left">
          <img style="width: 100%"
               src="https://img2.baidu.com/it/u=2835515149,2397014096&fm=253&fmt=auto&app=138&f=GIF?w=325&h=270">
          <span>小米</span>
          <br>
          <span>商品数量：100</span>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div style="text-align: left">
          <img style="width: 100%"
               src="https://img2.baidu.com/it/u=2835515149,2397014096&fm=253&fmt=auto&app=138&f=GIF?w=325&h=270">
          <span>小米</span>
          <br>
          <span>商品数量：100</span>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div style="text-align: left">
          <img style="width: 100%"
               src="https://img2.baidu.com/it/u=2835515149,2397014096&fm=253&fmt=auto&app=138&f=GIF?w=325&h=270">
          <span>小米</span>
          <br>
          <span>商品数量：100</span>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div style="text-align: left">
          <img style="width: 100%"
               src="https://img2.baidu.com/it/u=2835515149,2397014096&fm=253&fmt=auto&app=138&f=GIF?w=325&h=270">
          <span>小米</span>
          <br>
          <span>商品数量：100</span>
        </div>
      </van-grid-item>
    </van-grid>
    <BottomTab/>
  </div>
</template>

<style scoped>
:deep(.van-grid-item__content) {
  display: flex;
}

.tips {
  height: 80px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding: 0 20px;
}

.search-input {
  text-align: center;
  background-color: transparent;
  border: none;
  display: block;
  width: 88px;
}

.search {
  text-align: center;
  background-color: rgb(222, 188, 181);
  padding: 5px;
  display: flex;
  flex: 1;
  margin: 0 20px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  position: relative;
}

.my-swipe {
  height: 300px;
}

.header {
  margin-top: 10px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
</style>